<template>
  <uni-popup ref="popup" type="bottom" safeArea backgroundColor="#fff">
    <view class="flex-col">

      <scroll-view scroll-y class="scroll-form-y">
        <view style="margin: 20rpx">
          <uni-forms ref="ruleForm" :model="ruleForm" labelWidth="auto"
                     label-position="top">

            <uni-forms-item label="是否有违约金:" name="isDefaultPenalty" required
                            :rules="[{required:true, errorMessage: '是否有违约金',validateTrigger:'bind'}]">
              <text class="settlementType"/>
              <uni-data-checkbox v-model="ruleForm.isDefaultPenalty" :localdata="localData"/>
            </uni-forms-item>

            <template v-if="ruleForm.isDefaultPenalty === '0'">

              <uni-forms-item label="违约金(元):" name="defaultPenalty" required
                              :rules="[{required:true, errorMessage: '是否有违约金',validateTrigger:'bind'}]">
                <text class="defaultPenalty"/>
                <uni-easyinput v-model="ruleForm.defaultPenalty" @change="handleDefaultPenalty"
                               placeholder="请输入违约金(元)"/>
              </uni-forms-item>

              <uni-forms-item label="违约金付款方式:" name="paymentMethod" required
                              :rules="[{required:true, errorMessage: '违约金付款方式',validateTrigger:'bind'}]">
                <text class="paymentMethod"/>
                <uni-data-checkbox v-model="ruleForm.paymentMethod" :localdata="paymentMethodData"/>
              </uni-forms-item>
            </template>


            <uni-forms-item label="附件:" name="attachment" required
                            :rules="[{required:true, errorMessage: '上传附件',validateTrigger:'bind'}]">
              <image-common :disabled="false" :up-type="2" :limit="5" v-model="ruleForm.attachment"/>
            </uni-forms-item>

            <uni-forms-item label="说明:">
              <uni-easyinput type="textarea" v-model="ruleForm.specification" :maxlength="500"
                             placeholder="请输入说明"/>
            </uni-forms-item>

            <view v-if="Number(disposalStatus) > 7">
              <uni-forms-item label="承销商收款账户:">
                <switch color="#FFCC33" :checked="checked" @change="handleSwitch" style="transform:scale(0.7)"/>
              </uni-forms-item>

              <uni-forms-item v-if="checked" label="收款账号:" required name="underwriterBankAccount"
                              :rules="[{required:true, errorMessage: '收款账号',validateTrigger:'bind'}]">
                <text class="underwriterBankAccount"/>
                <zxz-uni-data-select v-model="ruleForm.underwriterBankAccount" :localdata="options"
                                     dataKey="accountNumber" dataValue="accountNumber" filterable
                                     placeholder="请选择收款账号" @change="handleChange" :clear="true"/>
              </uni-forms-item>

              <uni-forms-item v-else label="收款账号:">
                <zxz-uni-data-select v-model="ruleForm.underwriterBankAccount" :localdata="options"
                                     dataKey="accountNumber" dataValue="accountNumber" filterable
                                     placeholder="请选择收款账号" @change="handleChange" :clear="true"/>
              </uni-forms-item>

              <uni-forms-item label="开户名称:">
                <uni-easyinput v-model="ruleForm.underwriterBankName" disabled placeholder="请输入开户名称"/>
              </uni-forms-item>

              <uni-forms-item label="开户银行:">
                <uni-easyinput v-model="ruleForm.underwriterBank" disabled placeholder="请输入开户银行"/>
              </uni-forms-item>

            </view>


          </uni-forms>
        </view>

      </scroll-view>

      <view class="button-container">
        <button class="btn-item" @click.stop="submit">提 交</button>
      </view>
    </view>
  </uni-popup>
</template>

<script>
import * as apis from '@/api/routineHandle'

export default {
  name: 'underwriter',//承销商违约
  computed: {},
  watch: {
    'ruleForm.attachment': {
      handler(val) {
        if (val) {
          this.$refs.ruleForm.clearValidate('attachment');
        }
      },
      immediate: true,
      deep: true
    }
  },
  data() {
    return {
      ruleForm: {
        isDefaultPenalty: '0',
        defaultPenalty: '',
        paymentMethod: '1',
        attachment: undefined,
        specification: '',
        underwriterBankAccount: '',
        underwriterBankName: '',
        underwriterBank: '',
        vehicleDisposalId: null,
        vehicleDisposalNo: null,
        configStatus: '1',
        underwriterId: '',
        bankCode:''
      },
      localData: [
        {value: "0", text: "有"},
        {value: "1", text: "无"},
      ],
      paymentMethodData: [{value: "1", text: "单独支付"},],
      disposalStatus: null,
      checked: true,
      options: [],
      finalPrice: ''
    };
  },
  created() {
  },
  mounted() {
  },
  methods: {
    open(row) {
      this.$refs.popup.open()
      this.clear()
      this.handleSelectList(row.underwriterId)
      this.ruleForm.vehicleDisposalId = row.vehicleDisposalId
      this.ruleForm.vehicleDisposalNo = row.vehicleDisposalNo
      this.ruleForm.underwriterId = row.underwriterId
      this.disposalStatus = Number(row.disposalStatus)
      this.finalPrice = row.finalPrice
      console.log(this.disposalStatus)
      // if (Number(row.disposalStatus) >= 9) {
      //   this.paymentMethodData = [
      //     {value: "0", text: "已付金额抵扣"},
      //     {value: "1", text: "单独支付"},
      //   ]
      //   this.ruleForm.paymentMethod = '0'
      //   this.$forceUpdate()
      // } else {
      //   this.paymentMethodData = [
      //     {value: "1", text: "单独支付"},
      //   ]
      //   this.ruleForm.paymentMethod = '1'
      //   this.$forceUpdate()
      // }
    },

    clear() {
      this.ruleForm = {
        isDefaultPenalty: '0',
        defaultPenalty: '',
        paymentMethod: '1',
        attachment: undefined,
        specification: '',
        underwriterBankAccount: '',
        underwriterBankName: '',
        underwriterBank: '',
        vehicleDisposalId: null,
        vehicleDisposalNo: null,
        configStatus: '1',
        underwriterId: '',
        bankCode:''
      }
    },

    handleDefaultPenalty(val) {
      if (val) {
        this.ruleForm.defaultPenalty = this.validateInput(val)
      }
    },

    validateInput(val) {
      let num;
      const msg = /^(?:[1-9]\d*|0)(?:\.\d+)?$/
      if (!msg.test(val)) {
        return 0.01;
      } else {
        num = Number(val.toString().match(/^\d+(?:\.\d{0,2})?/)[0]);
        if (num < 0.01) {
          return 0.01;
        } else if (num > this.finalPrice) {
          return this.finalPrice
        } else if (num > 999999999.99) {
          return 999999999.99
        }
      }
      return num;
    },

    handleSwitch(val) {
      this.checked = val.detail.value
      if (this.checked) {
        this.ruleForm.configStatus = '1'
      } else {
        this.ruleForm.configStatus = '2'
      }
    },

    handleSelectList(id) {
      if (!id) return
      apis?.queryBySupplierId({supplierId: id}).then(res => {
        if (res.code === 200) {
          this.options = res.data || []
        }
      })
    },

    handleChange(val) {
      let obj = this.options.find(item => item.accountNumber === val.accountNumber)
      console.log(obj, val)
      this.ruleForm.underwriterBankName = obj.accountName
      this.ruleForm.underwriterBank = obj.bankName
      this.ruleForm.bankCode = obj.bankCode
    },

    async submit() {
      try {
        await this.handleEffect()
        const res = await apis?.underwriterDefault(this.ruleForm)
        if (res.code === 200) {
          this.$refs.popup.close()
          this.$modal.msgSuccess("提交成功");
          this.$emit('success');
        }
      } catch (e) {
        console.error(e)
      }
    },

    handleEffect() {
      return new Promise((resolve, reject) => {
        this.$refs.ruleForm.validate().then((res) => {
          resolve();
        }).catch((err) => {
          reject(err);
        });
      });
    },
  },
};
</script>

<style scoped lang="scss">
.scroll-form-y {
  max-height: 80vh;
}
</style>


